
    {extend name="common/form" /}
    {block name="form" /}
    <style type="text/css">

        #toolControl {
            position: absolute;
            top: 10px;
            left: 0px;
            right: 0px;
            margin: auto;
            width: 168px;
            z-index: 1001;
        }
        .toolItem {
            width: 30px;
            height: 30px;
            float: left;
            margin: 1px;
            padding: 4px;
            border-radius: 3px;
            background-size: 30px 30px;
            background-position: 4px 4px;
            background-repeat: no-repeat;
            box-shadow: 0 1px 2px 0 #E4E7EF;
            background-color: #ffffff;
            border: 1px solid #ffffff;
        }
        .toolItem:hover {
            border-color: #789CFF;
        }
        .active {
            border-color: #D5DFF2;
            background-color: #D5DFF2;
        }

        #marker {
            background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
        }
        #polyline {
            background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
        }
        #polygon {
            background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
        }
        #circle {
            background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
        }
    </style>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
        <div class="widget am-cf">
            <div class="widget-head am-cf">

                <div class="widget-title am-fl">添加区域</div>
                <div class="widget-function am-fr">
                    <a href="javascript:;" class="am-icon-cog"></a>
                </div>
            </div>
            <div class="widget-body am-fr">
            <form class="am-form tpl-form-border-form tpl-form-border-br">
                <input type="hidden" name="id" value="">                <div class="am-form-group">
                    <label for="user-name" class="am-u-sm-3 am-form-label">
                        区域                    </label>
                                            <div class="am-u-sm-9">
                           <input type="text" name="name" value="{$info.name|default=''}" required="required" class="tpl-form-input" placeholder="请填写区域">
                        </div>
                                    </div>
                    <div class="am-form-group">
                        <label for="user-name" class="am-u-sm-3 am-form-label">
                        是否开启                    </label>
                                            <div class="am-u-sm-9">
                            <div class="tpl-switch">
                                <input type="checkbox" name="open"  class="ios-switch bigswitch tpl-switch-btn am-margin-top-xs" {present name='$info.open'}{eq name='$info.open' value="1"}checked{/eq} {else /}checked{/present}>
                                <div class="tpl-switch-btn-view">
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="user-name" class="am-u-sm-3 am-form-label">
                            框选区域
                        </label>
                        <div class="am-u-sm-9" >

                            <div style="height: 650px;" id="container"></div>
                            <div>
                                绘制：鼠标左键点击及移动即可绘制图形<br/>
                                结束绘制：鼠标左键双击即可结束绘制折线、多边形、多边形会自动闭合；圆形单击即可结束<br/>
                                中断：绘制过程中按下esc键可中断该过程
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="location">
                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                            <button type="button" onclick="add('{:url($type)}','form')"
                                    class="am-btn am-btn-primary tpl-btn-bg-color-success">
                                提交
                            </button>
                        </div>
                    </div>
            </form>
        </div>
    </div>
    </div>


    <iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
            src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
    </iframe>
    <!--上面这个是别人的key-->
    {/block}
    {block name='script'}





    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=CP4BZ-NH6HJ-YINF2-K7PXT-GFAGZ-DJFOE&libraries=drawing"></script>
    <script>
        var loc;
        window.addEventListener('message', function(event) {
            // 接收位置信息
             loc = event.data;
             init();
        },false)       ;
        setTimeout(function() {
            if (!loc) {
                init();
                console.log('定位超时')
            }
        }, 6000);
        var overlaysArray = []; //覆盖物容器,用于清除覆盖物
        var radius = 1000;
        var map;
        function init() {


            if(!loc){
                loc = {lat:30.659922,lng:104.065631};
            }
            map = new qq.maps.Map(document.getElementById("container"), {
                center : new qq.maps.LatLng(loc.lat,loc.lng),
                zoom : 14
            });

            var drawingManager = new qq.maps.drawing.DrawingManager({
                drawingMode: qq.maps.drawing.OverlayType.POLYGON, //默认类型
                drawingControl: true,
                drawingControlOptions: {
                    position: qq.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [
                        qq.maps.drawing.OverlayType.MARKER,
//                        qq.maps.drawing.OverlayType.CIRCLE,
                        qq.maps.drawing.OverlayType.POLYGON,
                        qq.maps.drawing.OverlayType.RECTANGLE
                    ]
                },

                markerOptions:{
                    visible:false
                },
                circleOptions: {
                    fillColor: new qq.maps.Color(255, 208, 70, 0.3),
                    strokeColor: new qq.maps.Color(88, 88, 88, 1),
                    strokeWeight: 3,
                    clickable: false
                }
            });
            drawingManager.setMap(map);


            qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
                if(event.type=="marker"){
                    clearOverlays(overlaysArray);

                    var latLng =event.overlay.getPosition();
                    lat = latLng.getLat().toFixed(5);
                    lng = latLng.getLng().toFixed(5);
                    var center = new qq.maps.LatLng(lat, lng);
                    var geocoder = new qq.maps.Geocoder();
                    geocoder.getAddress(latLng);
//设置服务请求成功的回调函数
                    geocoder.setComplete(function(result) {
                        doMarker(center, result.detail.address + latLng);
                        doCircle(center);
                        getPeopleDataByCircle(radius,lat+","+lng);

                    });
//若服务请求失败，则运行以下函数
                    geocoder.setError(function() {
                        alert("出错了，请输入正确的经纬度！！！");
                    });

                }else if(event.type=="circle"){
                    clearOverlays(overlaysArray);
                    overlaysArray.push(event.overlay);
                    var latLng =event.overlay.getCenter();
                    var newRadius=event.overlay.getRadius();
                    lat = latLng.getLat().toFixed(5);
                    lng = latLng.getLng().toFixed(5);
                    var center = new qq.maps.LatLng(lat, lng);
                    var geocoder = new qq.maps.Geocoder();
                    geocoder.getAddress(latLng);
//设置服务请求成功的回调函数
                    geocoder.setComplete(function(result) {
                        doMarker(center, result.detail.address + latLng);
                        getPeopleDataByCircle(newRadius,lat+","+lng);

                    });
//若服务请求失败，则运行以下函数
                    geocoder.setError(function() {
                        alert("出错了，请输入正确的经纬度！！！");
                    });

                }else if(event.type=="polygon"||event.type=="rectangle"){
                    clearOverlays(overlaysArray);
                    overlaysArray.push(event.overlay);

                    /*   event.overlay.getPath().forEach(function(e){
                     var lng=e.getLng();
                     var lat=e.getLat();
                     points+=lng+" "+lat+",";
                     });
                     points=points.substring(0, points.length-1);*/
//                    getPeopleDataByPolygon( event.overlay.getPath());
                    getPeopleDataByPolygon( event.overlay.getPath().elems);
                }
            });





        }





        //清除覆盖物
        function clearOverlays(overlaysArray) {
            if (overlaysArray) {
                for (i in overlaysArray) {
                    overlaysArray[i].setMap(null);
                }
            }
        }


        //画圆中心点
        function doMarker(center, title) {
//创建一个Marker
            var marker = new qq.maps.Marker({
//设置Marker的位置坐标
                position : center,
//设置显示Marker的地图
                map : map,
                title : title
            });


//设置Marker的可见性，为true时可见,false时不可见，默认属性为true
            marker.setVisible(true);
//设置Marker的动画属性为从落下
            marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
            overlaysArray.push(marker);
            marker.setMap(map);


        }


        //画圆
        function doCircle(center) {
            var circle = new qq.maps.Circle({
                map : map,
                center : center,
                radius : radius,
                strokeWeight : 5
            });
            overlaysArray.push(circle);
            circle.setMap(map);
        }


        //查询圆数据
        function getPeopleDataByCircle(radius,center) {
            console.log("圆形中心为:"+center+"半径为:"+radius);
        }



        //查询多边形数据
        function getPeopleDataByPolygon(points) {

            $('input[name="location"]').val(JSON.stringify(points))
            console.log("多边形路径为:",points)
        }


    </script>



    {/block}
    {extend}
